<!doctype html>
<html> 
<head>
    <meta charset="UTF-8">
    <title>音频对话框</title>
    <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        ul,li{list-style: none;padding: 0;margin: 0;}
        .dn{display: none;}
        .audioWrap{margin: 10px;background: #fff;color: #646464;}
        .tabNav{position: relative;z-index: 2;}
        .tabNav li{height: 30px;line-height: 30px;padding: 0 8px;border: 1px solid #ccc;font-size: 12px;color: #646464;display: inline-block;vertical-align: middle;cursor: pointer;
        background:-webkit-linear-gradient(#fff,#eee);background:-moz-linear-gradient(#fff,#eee);background:-o-linear-gradient(#fff,#eee);background:linear-gradient(#fff,#eee);}
        .tabNav li.active{background: #fff;border-bottom-color: #fff;}
        .tabCon{height: 280px;padding: 10px;margin-top: -1px;border: 1px solid #ccc;font-size: 12px;overflow: hidden;}
        .tabCon .con{position: relative;height: 100%;overflow: auto;}
        .file-box{position: relative;height: 40px;line-height: 40px;margin:10px auto;border-radius:3px;font-size: 16px;color: #18a093;cursor: pointer;overflow: hidden;text-align:center;border: 2px dashed #e6e6e6;}
        .file-box svg{vertical-align: middle;fill:#e6e6e6;}
        .file-box form,.file-box input[type='file']{width:100%;height:100%;position: absolute;left: 0%;top: 0%;overflow: hidden;opacity: 0;color: #fff;cursor: pointer;}
        .file-box:hover{border-color: #18a093;}
        .file-box:hover svg{fill: #18a093;}
        .audiourl_two{width: calc(100% - 10px);padding: 8px 5px;margin-bottom: 5px;border: none;font-size: 14px;color: #06c;}
        .audiourl_two:focus{outline-style: none;}
        .audiourl_src{height: 40px;}
        .divBtn{margin-top: 10px;text-align: right;}
        .divBtn input[type='button']{width: 94px;height: 24px;line-height: 24px;cursor: pointer;border: 1px solid #ccc;border-radius: 5px;background:-webkit-linear-gradient(#fff,#eee);background:-moz-linear-gradient(#fff,#eee);background:-o-linear-gradient(#fff,#eee);background:linear-gradient(#fff,#eee);}
        .divBtn input[type='button']:hover{background: #18a093;border-color: #18a093;color: #fff;}
        .conUl li{margin: 5px;}
        .conUl li label,.conUl li select,.conUl li input,.conUl li button{display: inline-block;vertical-align: middle;}
        .conUl li label{width: 60px;padding: 0 5px;color: #06c;text-align: right;}
        .conUl li select,.conUl li input{margin:0 5px;padding:2px 5px;background: #FFF;border: 1px solid #d7d7d7;}
        .conUl li select{height: 27px;line-height: 27px;}
        .conUl li input{height: 21px;line-height: 21px;}
        .conUl li button{height: 27px;padding: 0 15px;border:none;border-radius: 3px;color: #fff;background: #18a093;cursor: pointer;}
        .conUl li button:hover{box-shadow: 0 0 5px #fff inset;}
        .conUl li .website{width: 370px;}
        .audiocontentlist li:first-child{font-weight: bold;}
        .audiocontentlist li{padding: 8px 0;border-bottom: 1px solid #ddd;}
        .audiocontentlist li.cur{background: #18a093;color: #fff;}
        .audiocontentlist li.cur .span3{color: #fff;}
        .audiocontentlist li span,.audiocontentlist li input{padding: 0 5px;display: inline-block;vertical-align: middle;}
        .audiocontentlist li .span1{width: 120px;}
        .audiocontentlist li .span2{width: 110px;}
        .audiocontentlist li .span3{width: calc(100% - 262px);border: none;color: #646464;background: transparent;}
        .audiocontentlist li .span3:focus{outline-style: none;}
        .audiopage{padding: 8px 0;font-size: 14px;}
        .audiopage *{padding: 3px 7px;text-decoration: none;color: #646464;}
        .audiopage .current{color: #18a093;font-weight: bold;}
        .audiopage *:hover{color: #18a093;}
    </style>
</head>
<body>
    
<form id="frm" action="" target="f" method="post" enctype="multipart/form-data">
    <div class="audioWrap">
        <ul class="tabNav">
            <li datecurid='1' class="active">插入音频</li>
            <li datecurid='2'>上传音频</li>
           <!--  <li datecurid='3'>音频库</li> -->
        </ul>
        <div class="tabCon">
            <div class="con">
                <ul class="conUl">
                    <li>
                        <label>音频URL</label>
                        <input type="text" class="website audiourl_one">
                    </li>
                </ul>
            </div>
            <div class="con dn">
                <div class="file-box">
                    <svg viewBox="0 0 1030 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path d="M961.8986 573.312597H573.320062v388.578538c0 22.29549-27.073095 62.108865-62.108864 62.108865-33.443235 0-62.108865-38.22084-62.108865-62.108865V573.312597H62.11633c-22.29549 0-62.108865-27.073095-62.108865-62.108864s38.22084-62.108865 62.108865-62.108865h388.578538V62.108865c0-22.29549 27.073095-62.108865 62.108865-62.108865C546.246967 0 574.912597 38.22084 574.912597 62.108865v388.578538h388.578538c22.29549 0 62.108865 27.073095 62.108865 62.108864s-41.40591 60.51633-63.7014 60.51633z m0 0"></path></svg>
                    <input type="file" name="upfileone" class="uploadone_click" value="">
                </div>
                <input type="text" class="audiourl_two" value="">
                <audio src="" class="audiourl_src" controls></audio>
            </div>
            <div class="con dn">
				<div style='color:red'>单击选择音频行</div>
                <ul class="conUl">
                    <li>
                        类型<select class="auidotypelist"></select>
                        名称<input type="text" class="keyword" value="">
                        <button class="audiosousou">搜索</button>
                    </li>
                </ul>
                <ul class="audiocontentlist"></ul>
                <div class="audiopage"></div>
                <input type="hidden" class="audiourl_three" value="">
            </div>
        </div>
        <div class="divBtn">
            <input type="button" onclick="return_audio()" value="确认">
        </div>
        <iframe name="f" style="display:none;"></iframe>
    </div>
</form>

<script type="text/javascript">
    function ajaxpage(page){
        var columnid=$('.auidotypelist').val();
        var keyword=$('.keyword').val();
        var url=cmsroot+'/Vms/Vms/ueditor_audio_list';
        $.post(url,{page:page,columnid:columnid,keyword:keyword},function(result){
            if(!result.status){
                alert(result.msg);
            }else{
                //内容列表
                var contentlist=result.data.audiolist;
                var contenthtml='';
                contenthtml+=getcontenthtml(contentlist);
                $('.audiocontentlist').html(contenthtml);
                //分页
                var pageshow=result.data.pageshow;
                $('.audiopage').html(pageshow);
            }
        },'json');
    }
    function getcontenthtml(contentlist){
        var contentlistlength=contentlist.length;
        var contentlisthtml='';
        contentlisthtml+='<li><span class="span1">编号</span><span class="span2">栏目</span><span class="span3">名称</span></li>';
        if(contentlistlength>0){
            for(var i=0;i<contentlistlength;i++){
                contentlisthtml+='<li class="audio_li_style auido_'+contentlist[i]['uuid']+'" onclick="audio_click(\''+contentlist[i]['uuid']+'\')"><span class="span1">'+contentlist[i]['uuid']+'</span><span class="span2">'+contentlist[i]['column']+'</span><input type="text" class="span3" value="'+contentlist[i]['name']+'"></li>';
            }
        }
        return contentlisthtml;
    }
	function audio_click(uuid){
		//获取音频url get_video_audio_info
		var url=cmsroot+'/Vms/Vms/get_video_audio_info';
		$.post(url,{uuid:uuid},function(result){
            if(!result.status){
				alert(result.msg);
			}else{
				var audiourl=result.data.filedata;
				if(audiourl!='' && audiourl!=undefined){
					$('.audiourl_three').val(audiourl);
					var audio_li_style_length=$('.audio_li_style').length;
					for(i=0;i<audio_li_style_length;i++){
                        // $('.audio_li_style').eq(i).css('background-color','#fff');
						$('.audio_li_style').eq(i).removeClass('cur');
					}
                    // $('.auido_'+uuid).css('background-color','#18a093');
					$('.auido_'+uuid).addClass('cur');
				}else{
					alert('获取音频地址失败');
				}
			}
                
        },'json');
		
	}
    $('.tabNav li').on('click',function(){
        var i=$(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('.tabCon .con').eq(i).show().siblings('.tabCon .con').hide();
        var datecurid=$(this).attr('datecurid');
        if(datecurid==3){
            var url=cmsroot+'/Vms/Vms/ueditor_audio_list';
            $.post(url,{page:1},function(result){
                console.log(result);
                if(!result.status){
                    alert(result.msg);
                }else{
                    //类型
                    var typelist=result.data.typelist;
                    var typelistlength=typelist.length;
                    var typelisthtml='';
                    typelisthtml+='<option value="">全部</option>';
                    if(typelistlength>0){
                        for(var i=0;i<typelistlength;i++){
                            typelisthtml+='<option value="'+typelist[i]['id']+'">'+typelist[i]['name']+'</option>';
                        }
                    }
                    $('.auidotypelist').html(typelisthtml);
                    //内容列表
                    var contentlist=result.data.audiolist;
                    var contenthtml='';
                    contenthtml+=getcontenthtml(contentlist);
                    $('.audiocontentlist').html(contenthtml);
                    //分页
                    var pageshow=result.data.pageshow;
                    $('.audiopage').html(pageshow);
                }
            },'json');
        }
    })
    var cmsupload=window.parent.cmsupload;
    var cmsroot=window.parent.cmsroot;
    var ue = window.parent.ue;
    var  dialog = parent.$EDITORUI[window.frameElement.id.replace( /_iframe$/, '' )];
    function return_audio(){
        var datecurid=$('.active').attr('datecurid');
       
        var url='';
        //var width=0;
       // var height=0;
        if(datecurid==1){//插入音频
            url=$('.audiourl_one').val();
            // width=$('.audiourl_one_width').val();
            // height=$('.audiourl_one_height').val();
        }else if(datecurid==2){//上传音频
            url=$('.audiourl_two').val();
            // width=$('.audiourl_two_width').val();
            // height=$('.audiourl_two_height').val();
        }else if(datecurid==3){//音频库
			url=$('.audiourl_three').val();
        }
		if(url==''){
			alert('音频未设置或未选择');
			return false;
		}
        var audiohtml='<div><audio controls><source src="'+url+'" type="audio/mpeg">您的浏览器不支持 audio 元素。</audio></div>';
        dialog.close(true);
        //console.log(ue);return false;
        ue.setContent(audiohtml,true);
    }
    $(function(){
        $('.auidotypelist').change(function(){//类型搜索
            ajaxpage(1);
        })
        $('.audiosousou').click(function(){//提交搜索
            ajaxpage(1);
        })
        $('.uploadone_click').change(function(){
            var url=cmsupload+'/Ueditor/Ueditoraudio/upaudio';
            $('#frm').attr('action',url);
            $('#frm').submit();
        })
    })
    $('.audiourl_src').hide();
    window.addEventListener('message', function(messageEvent){
        var  data= messageEvent.data;
        console.log(data);
        if(data.status===false){
            alert(data.msg);
        }else{
            alert(data.msg);
            var urlaudio=cmsupload+'/'+data.img;
            $('.audiourl_two').val(urlaudio);
            $('.audiourl_src').attr('src',urlaudio).show();
        }
    }, false);
</script>
</body>
</html>